<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000" id="swiper">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入小区或地址"
      @search="onSearch"
      background="transparent"
      class="sousuo"
    >
      <template #label>
        <div>
          <span @click="changeCity(CityName)">{{ CityName.label }}</span
          ><span>▾</span>&nbsp;<span style="color: #ccc">|</span>&nbsp;
        </div>
        <!-- <router-link to="/city" @click="changeCity($event.target.innerText)"
          >上海<span>▾</span></router-link
        > -->
      </template>
      <template #action>
        <van-icon
          name="location-o"
          size="30"
          color="#fff"
          class="my-icon"
          @click.native="getMap"
        />
      </template>
    </van-search>
    <!-- 中心部分 -->
    <template>
      <HomeCenter></HomeCenter>
    </template>
    <!-- 租房小组 -->
    <div class="my_homeGroups">
      <van-nav-bar id="my_nav">
        <template #left>
          <span>租房小组</span>
        </template>
        <template #right>
          <router-link to="/">更多</router-link>
        </template>
      </van-nav-bar>
      <div class="my_grid">
        <van-grid :gutter="10" column-num="2" direction="horizontal">
          <van-grid-item v-for="item in homeGroups" :key="item.id">
            <van-image
              width="50px"
              height="50px"
              fit="cover"
              :src="item.imgSrc"
            />
            <div id="txt">
              {{ item.title }}<br />
              {{ item.desc }}
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getSwiper, getHomeGroups } from '@/api/home'
import { setCity, getCity } from '@/utils/storage'
export default {
  name: 'home-page',
  async created() {
    const res = await getSwiper()
    res.body.forEach((item) => {
      this.images.push(`http://liufusong.top:8080${item.imgSrc}`)
    })
    const { body } = await getHomeGroups()
    // console.log(body)
    body.forEach((item) => {
      item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
      this.homeGroups.push(item)
    })
    console.log(this.homeGroups)
    console.log(this.CityName)
  },
  data() {
    return {
      CityName: getCity('CityName') || {
        label: '杭州',
        value: 'AREA|19b39d4f-8a36-d6f8',
        pinyin: 'hangzhou',
        short: 'hz'
      },
      value: '',
      images: [],
      homeGroups: []
    }
  },
  methods: {
    onSearch(val) {
      console.log(val)
    },
    onCancel() {
      console.log('取消')
    },
    changeCity(value) {
      // console.log(value)
      setCity(value)
      this.$router.push('/city')
    },
    getMap() {
      console.log(111)
      this.$router.push('/map')
    }
  }
}
</script>

<style scoped lang="less">
#swiper {
  width: 100%;
  height: 220px;
  img {
    width: 100%;
    height: 220px;
  }
}
.sousuo {
  width: 100%;
  // height: 30px;
  position: fixed !important;
  top: 15px;
  .my-icon {
    transform: translateY(5px);
  }
  a {
    color: #333;
  }
}

/deep/ .my_homeGroups {
  // height: 400px;
  background-color: #f6f5f6 !important;
  #my_nav {
    background-color: #f6f5f6;
  }
}
/deep/ .my_grid {
  margin-bottom: 10px;
}
.van-nav-bar__left {
  span {
    color: #333;
    font-weight: 700;
    font-size: 16px;
    font-family: 楷体;
  }
  a {
    font-size: 14px;
    color: #999;
  }
}

/deep/ .van-grid-item__content--center {
  justify-content: space-around;
  #txt {
    font-size: 14px;
  }
}
</style>
